<template>
  <div class="dashboard-container">

    <el-drawer
      title="新增"
      :visible.sync="drawer"
      direction="rtl"
      :before-close="handleClose"
    >
      <el-form ref="addForm" :rules="addFormRules" style="margin-left:20px" :model="addForm" label-width="80px">
        <el-form-item label="目的地" prop="endScene">
          <el-select v-model="addForm.endScene" filterable style="width:200px" placeholder="请选择目的地">
            <el-option
              v-for="item in sceneList"
              :key="item.id"
              :label="item.sceneName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="距离(米)" prop="distance">
          <el-input v-model="addForm.distance" placeholder="请输入距离" style="width:200px" />
        </el-form-item>

        <el-form-item>
          <el-button @click="drawer = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('addForm')">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <el-form ref="searchForm" :model="searchForm" label-position="left" :inline="true">
      <el-form-item label="名称" prop="sceneName">
        <el-input v-model="searchForm.sceneName" clearable />
      </el-form-item>
      <el-button type="primary" @click="searchData('search')">查询</el-button>
      <el-button type="success" @click="clearSearch('clear')">清除</el-button>
    </el-form>
    <el-button type="primary" @click="drawer=true">新增</el-button>
    <el-table
      border
      :data="tableData"
      style="width: 100%;margin-top:20px"
      show-overflow-tooltip
    >
      <template v-for="item in tableProp">
        <el-table-column
          v-if="item.prop !== 'endSceneImage'"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="item.formatter"
        />
        <el-table-column
          v-if="item.prop === 'endSceneImage'"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
        >
          <template slot-scope="scope">
            <div class="scene-image">
              <img width="200" height="200" :src="`data:image/jpeg;base64,${scope.row.endScenePersist}`">
            </div>
          </template>
        </el-table-column>
      </template>
      <el-table-column
        prop="handle"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button type="text" style="color:red" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

import { getOtherSceneList, addDist, getDistById, deleteDist } from '@/api/scene'

export default {
  name: 'SceneDist',
  data() {
    return {
      id: null,
      drawer: false,
      sceneList: [],
      tableData: [],
      tableProp: [
        {
          prop: 'endScene',
          label: '目的地'
          // formatter: value => {
          //   return value.endScenePersist.sceneName
          // }
        }, {
          prop: 'endSceneDes',
          label: '目的地描述'
          // formatter: value => {
          //   return value.endScenePersist.sceneDesc
          // }
        }, {
          prop: 'endSceneImage',
          label: '目的地图片'
        }, {
          prop: 'distance',
          label: '距离(米)'
        }
      ],
      searchForm: {
        sceneName: ''
      },
      addForm: {
        endScene: null,
        distance: null
      },
      addFormRules: {
        endScene: [
          { required: true, message: '请选择目的地', trigger: 'change' }
        ],
        distance: [
          { required: true, message: '请输入距离数', trigger: 'change' }
        ]

      }
    }
  },
  mounted() {
    // 数据初始化
    this.init()
  },
  methods: {
    // 数据初始化
    init() {
      this.id = this.$route.query.id
      getDistById(this.id).then((res) => {
        this.tableData = res.list
      })
      getOtherSceneList(this.id).then(res => {
        this.sceneList = res
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const { endScene, distance } = this.addForm
          const commitForm = { 'startScene': this.id, endScene, distance }
          addDist(commitForm).then((res) => {
            this.$message.success('添加成功')
            this.$refs['addForm'].resetFields()
            this.drawer = false
            this.init()
          })
        } else {
          return false
        }
      })
    },
    del(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDist({ id }).then(() => {
          this.$message.success('删除成功')
          this.init()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
}
</style>
